<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			.box{
				background-color: #eee;
				height: 150px;
				/* line-height: 150px; */
				text-align: center;
			}
			h2{
				color: rgb(255,0,0);
				line-height: 150px;
			}
			.wrap>p:first-child{
				word-spacing: 10px;
			}
			.wrap>p:nth-child(2){
				letter-spacing: 10px;
			}
			.wrap>p:nth-child(4){
				text-indent: 32px;
			}
			.wrap>p:nth-child(6){
				text-transform: capitalize;
			}
			a{
				text-decoration: line-through;
			}
			.viewport{
				margin: 0 auto;
				padding: 8px;
				width: 320px;
				height: 900px;
				background-color: #eee;
				
				
			}	
			h3{
				white-space: nowrap;
				text-overflow: ellipsis;
				overflow: hidden;
			}
		</style>
	</head>
	<body>
		<h1>文本样式</h1>
		<!-- 
			文本颜色：color   
			
			颜色模式： 颜色关键           rgb颜色                 rgba颜色                     十六进制颜色                                  red/blue       rgb(0,0,0)          rgba(255,255,255,.5)         #FFFFFF #000000  0-9 A-F 
						red/blue       rgb(0,0,0)          rgba(255,255,255,.5)         #FFFFFF #000000  0-9 A-F 
			单词间隔：word-spacing   识别单词，增加单词间距
			
			字符间隔：letter-spacing   字或者字母之间增加间距
			
			文本缩进：text-indent   可以负值 百分比
			
			文本水平对齐：text-align 默认值left  ，center  right
			
			行间距：line-height  单行居中
			
			转换大小写：text-transform  uppercase大写  lowercase小写  capitalize首字母大写
			
			文本修饰：text-decoration   none/underline/overline/line-through
			
			处理空白字符： white-space 默认：normal  常用来设置禁止换行nowrap
			
			溢出处理：overflow：默认：visible     hidden 、scroll、aotu
			
			文本溢出处理：text-overflow  clip/ellipsis(省略号)
			
			经常用上面最后三个样式处理超长标题溢出部分省略号处理,注意要给子元素设置 
			-->
			<del>原价，120.00</del>
			<div class="wrap">
				<p>come on! 加油</p>
				<p>come on! 加油</p>
				<p>come on! 加油</p>
				<p>要学习css的话！一定要有好的html基础，有了基础学习css就不会很吃力了，学习进度就会随之加快，就不会导致一个地方卡住两三天，
				后面的学习就跟不上的情况！因此基础必须打牢，打牢，再打牢</p>
				<p>想要快速掌握HTML和CSS还有个窍门就是动手练习，模仿其他网页，当你成功的仿作出1个复杂的网页了，你就会对css+div布局，css样式设置
				有了一个初步的理解，写起代码也就相当的熟练了</p>
				<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas porttitor congue massa. Fusce posuere, magna sed pulvinar ultricies, purus lectus malesuada libero, sit amet commodo magna eros quis urna. Nunc viverra imperdiet enim. Fusce est. Vivamus a tellus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Proin pharetra nonummy pede. Mauris et orci. Aenean nec lorem.</p>

				<a href="https://segmentfault.com/a/1190000019542534" target="_blank">
					20个让你快速进阶的css技巧
				</a>
			</div>
			<div class="box">
				<h2>武汉加油！中国加油！</h2>
			</div>
			<div class="viewport">
				<h3>如果快速学习CSS和HTML的技巧和窍门</h3>
				<p>想要快速掌握HTML和CSS还有个窍门就是动手练习，模仿其他网页，当你成功的仿作出1个复杂的网页了，你就会对css+div布局，css样式设置
				有了一个初步的理解，写起代码也就相当的熟练了</p>
				<a href="https://segmentfault.com/a/1190000019542534" target="_blank">
					20个让你快速进阶的css技巧
				</a>
			</div>
	</body>
</html>
